<template>
  <div class="commodityPage.vue">
    <ul class="user-dis-list">
      <li class="user-dis-item" v-for="commo in commoDity" :key="commo.id">
        <img class="user-img fl" :src="commo.img" alt>
        <div class="uesr-txt-list fl">
          <p class="uesr-txt-item">{{commo.cname}}</p>
          <p class="uesr-txt-item">1994-03-20</p>
          <p class="uesr-txt-item user-txt-cont">{{commo.cont}}</p>
        </div>
      </li>
    </ul>
    <gofoot class="gofootBar"></gofoot>
  </div>
</template>

<script>
import kindApi from "@/api/kind/kind.js";
import gofoot from "@/views/kind/detail/components/Gofoot.vue";

export default {
  name: "commodityPage.vue",

  data() {
    return {
      commoDity: [],
    };
  },
  components: {
    gofoot
  },
  created() {
    this.getcommo();
  },
  methods: {
    getcommo() {
      kindApi.getCommo().then(res => {
        //res返回的结果 数据
        this.commoDity = res;
      });
    }
  }
};
</script>

<style lang='scss' scoped>
.user-dis-list {
  margin-top: 31px;
  .user-dis-item {
    position: relative;
    text-align: left;
    width: 323px;
    height: 115px;
    border-top: 1px solid pink;
    margin: 0 auto;
    .user-img {
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 50%;
    }
    .user-txt-cont{
      margin-top: 30px;
      line-height: 20px;
    }
    .uesr-txt-list {
      margin-left: 54px;
    }
  }
  :first-child{
    border-top: 0;

  }
}
</style>
